<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./js/bootstrap-3.4.1-dist/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="./js/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="./js/jquery-3.6.0.min.js"></script>
    <script src="./js/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>


</head>
<body>
  
    
<div class="div1">
    <h3 style="text-align: center;">宾馆管理系统入住信息表</h3>
    <table class="table table-striped table-hover" >
        <thead style="font-size: 18px;">
            <tr>
                <th>序号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>身份证</th>
                <th>房间号</th>
                <th>入住时间</th>
                <th>操作</th>
            </tr>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>小王</td>
                    <td>男</td>
                    <td>22</td>
                    <td>123456</td>
                    <td>101</td>
                    <td>2022.9.1</td>
                    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">修改</button>
                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModa2" >删除</button></td>                </tr>
                <tr>
                    <td>2</td>
                    <td>小王</td>
                    <td>男</td>
                    <td>22</td>
                    <td>123456</td>
                    <td>101</td>
                    <td>2022.9.1</td>
                    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">修改</button>
                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModa2" >删除</button></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>小王</td>
                    <td>男</td>
                    <td>22</td>
                    <td>123456</td>
                    <td>101</td>
                    <td>2022.9.1</td>
                    <td><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">修改</button>
                        <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModa2" >删除</button></td>

                </tr>
            </tbody>
        </thead>
    </table>
</div>
    
<!-- Button trigger modal -->
<!-- <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
    Launch demo modal
  </button> -->
  
  <!-- 修改模态 -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">修改顾客信息</h4>
        </div>
        <div class="modal-body">
            <form>
                <div class="form-group">
                <label for="exampleInputEmail1">姓名</label>
                  <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入姓名">
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">性别</label>
                  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入性别">
                </div>
                <div class="form-group">
                <label for="exampleInputEmail1">年龄</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入年龄">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">身份证</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入身份证信息">
                </div>
                <div class="form-group">
                    <label for="exampleInputEmail1">房间号</label>
                    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入房间号">
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">入住时间</label>
                    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="请输入入住时间">
                </div>
              
              </form>
              <button type="button" class="btn btn-success">保存</button>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>
  <!-- 删除模态 -->
  <div class="modal fade" id="myModa2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title" id="myModalLabel">温馨提示</h4>
        </div>
        <div class="modal-body">
         确定删除这条信息吗？
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
          <button type="button" class="btn btn-primary">确定</button>
        </div>
      </div>
    </div>
  </div>
</body>
</html>